<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { taskAllList } from '@/api/task';
// import CompanySource from './components/CompanySource.vue'
// import CompanyTask from './components/CompanyTask.vue'
const router = useRouter();
const companyId = router.currentRoute.value.params.id;
const state: any = reactive({
  item: '',
  taskList: [],
  loading: false,
});

const leftBack = () => history.back();
const gotoMessage = () => {
  router.push('/message/talk/' + state.item.user_id);
};
const getTaskAllList = async () => {
  state.loading = true;
  const res: any = await taskAllList({
    company_id: companyId,
  });
  if (res) {
    state.taskList = res.records;
    state.item = res.records[0];
    state.loading = false;
  } else {
    showToast(res.msg);
    state.loading = false;
  }
};
getTaskAllList();
</script>
<template>
  <van-nav-bar title="任务来源" left-arrow @click-left="leftBack" />
  <div class="company-source">
    <img :src="state.item.logo" />
    <div>
      <h5>{{ state.item.company_name }}</h5>
      <p>{{ state.item.city }} . {{ state.item.area }}</p>
    </div>
  </div>
  <div class="company-task">
    <h3>其他任务<i></i></h3>
    <dl>
      <dt v-for="(item, index) in state.taskList" :key="index">
        <h4>
          {{ item.task_name }}<span>{{ item.task_budget }}元</span>
        </h4>
        <p>{{ item.city }} ｜ {{ item.task_cycle }}天 ｜ {{ item.service_mode }}</p>
      </dt>
    </dl>
  </div>
  <!-- <CompanySource :item="state.item"></CompanySource> -->
  <!-- <CompanyTask :taskList="state.taskList"></CompanyTask> -->
</template>
<style lang="scss" scoped>
.company-source {
  display: flex;
  align-items: center;
  margin: 0.91rem 0;
  border-bottom: 1px solid #f0f0f0;
  padding-left: 0.67rem;
  padding-bottom: 0.91rem;
  img {
    width: 2.67rem;
    height: 2.67rem;
    border-radius: 1.34rem;
    margin-right: 0.61rem;
  }
  h5 {
    font-size: 0.8rem;
    line-height: 0.8rem;
    font-weight: 300;
    color: #333333;
    margin-bottom: 0.51rem;
  }
  p {
    font-size: 0.69rem;
    line-height: 0.69rem;
    font-weight: 100;
    color: #666666;
  }
}

.company-task {
  h3 {
    font-size: 0.96rem;
    line-height: 0.96rem;
    font-weight: 500;
    color: #333333;
    padding-left: 0.64rem;
    margin-bottom: 0.4rem;
    position: relative;
    i {
      width: 1.87rem;
      height: 0.64rem;
      background: linear-gradient(90deg, #fe8f27, #ffffff);
      opacity: 0.46;
      border-radius: 0.32rem;
      position: absolute;
      left: 0.5rem;
      top: 0.4rem;
      z-index: -1;
    }
  }
  dl dt {
    padding: 1.4rem 0.64rem;
    border-bottom: 1px solid #f0f0f0;
  }
  h4 {
    font-size: 0.85rem;
    line-height: 0.85rem;
    font-weight: 400;
    color: #333333;
    margin-bottom: 0.48rem;
    display: flex;
    span {
      font-size: 0.75rem;
      line-height: 0.75rem;
      font-weight: 400;
      color: #f1983c;
      flex: 1;
      text-align: right;
    }
  }
  p {
    font-size: 0.69rem;
    line-height: 0.69rem;
    font-weight: 100;
    color: #333333;
  }
}
</style>
